<!--
*@Author: QWP
*@Description: 值班情况
*@Date: 2024-07-18 14:05:35
-->
<template>
  <u-card title="值班(备勤)情况">
    <a-space style="position: absolute;
      z-index: 10;
      top: 16px; right: 16px;">
      <a-button :style="{background: state.levelColor.smsBgColor}"
        style="color: #fff"
        @click="showFastSms = true">发送短信</a-button>
      <a-button :style="{background: state.levelColor.groupBgColor}"
        style="color: #fff"
        @click="showFastGroup = true">快速建群</a-button>
    </a-space>
    <USegmented :data="segmentedData"
      :activeKey.sync="activeKey"
      style="margin-top: 20px;"
      @click="segmentClick">
    </USegmented>

    <a-list :grid="{ column: 3 }" :data-source="workTotal">
      <template #renderItem="{ item }">
        <a-row class="u-work-total-row">
          <a-image :src="item.iconImg"
            :preview="false" 
            style=" width: 36px; height: 36px"></a-image>
          <div style="margin-left: 6px;">
            <div style="font-family: PingFang SC, PingFang SC;font-size: 16px;color: #333333;">{{ item.label }}</div>
            <div style="font-family: DIN Medium, DIN Medium;font-weight: 600;font-size: 28px;color: #1890FF;">{{ item.value }}</div>
          </div>
        </a-row>
      </template>
    </a-list>

    <template v-if="activeKey == '1'"> 
      <div @mouseover="stopScroll"
        @mouseleave="startS">
        <u-table :columns="firmCols"
          :data="firmDatas"
          :pagination="false"
          :row-height="500"
          :scroll="{ y: $attrs['y'] || 582 }"
          ref="firmTab"
          class="u-firm-tab">
        </u-table>
      </div>
    </template>
    <template v-else-if="activeKey == '2'">
      <u-table :columns="monitorCols"
        :data="monitorDatas"
        :pagination="false"
        :row-height="50"
        :scroll="{ y: $attrs['y'] || 582 }"
        class="u-monitor-tab"
        @mouseenter="clearInterval(monitorTimer)"
        @mouseleave="startS"></u-table>
    </template>
  </u-card>

  <!-- 快速发短信 -->
  <FastSms v-model:open="showFastSms"
    width="90%"
    title="发送短信"/>

  <!-- 快速建群 -->
  <FastGroup v-model:open="showFastGroup"
    width="90%"
    title="快速建群"
    @submit="showFastGroup = false; showChat = true"/>

  <!-- 展示群聊弹窗 -->
  <ChatDialog v-model:open="showChat"
    width="60%"
    @close="showChat = false"/>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, onMounted, h, onBeforeUnmount } from 'vue' 
import { useEmergencyStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { getColor, levMainColor } from '@/views/index/emergencyIndex/data'
import USegmented from '@/views/index/emergencyIndex/component/segmented/Index.vue'
import { ColumnProps } from 'ant-design-vue/es/table'
import { PieChartOutlined, BarChartOutlined, LineChartOutlined } from '@ant-design/icons-vue'
import FastSms from '@/views/oa/assist/sms/fastSms/Index.vue'
import FastGroup from '@/views/oa/emergency/group/fastGroup/Index.vue'
import ChatDialog from '@/views/oa/emergency/group/chat/ChatDialog.vue'
import { urlFile } from '@/util/common'
import { unitDept, firm1, firm2 } from './data.js'

const { level } = storeToRefs(useEmergencyStore())
const router = useRouter();

const state = reactive({
  levelColor: computed(() => getColor(level.value))
})

const workTotal = reactive([
  { iconImg: urlFile('warningIndex/workNumber.png'), label: '在岗人数', value: '200' },
  { iconImg: urlFile('warningIndex/userNumber.png'), label: '值班(守)人数', value: '150' },
  { iconImg: urlFile('warningIndex/teamNumber.png'), label: '备勤总人数', value: '300' },
])

let activeKey = ref<string>('1')
const segmentedData = reactive([
  {label: '监管端', id: '1', },
  {label: '企业端', id: '2'}
]);

onMounted(() => {
  let status = { 0: '在岗', 1: '值守', 2: '备勤' }
  unitDept.forEach((item, index) => {
    firmDatas.push({
      key: index, a: item, b: `联系人${index + 1}`, c: Date.now().toString().substring(0, 11), d: status[Math.floor(Math.random() * 3)],
    })
  })

  const firm = [...firm1, ...firm2]
  firm.forEach((item, index) => {
    monitorDatas.push({
      a: item, b: `联系人${index + 1}`, c: Date.now().toString().substring(0, 11), d: status[Math.floor(Math.random() * 3)],
    })
  }) 

  // setTimeout(() => startS(), 1000)
})
onBeforeUnmount(() => {
  clearInterval(firmTimer)
  clearInterval(monitorTimer)
})

// 鼠标移入，停止滚动
const stopScroll = ()  => {
  if(activeKey.value == '1') {
    clearInterval(firmTimer)
  }
  else if(activeKey.value == '2') {
    clearInterval(monitorTimer)
  }
}

const firmTab = ref()
let firmTimer = null;
let firmScrollH = ref<number>(0);
let firmDatas = reactive<any[]>([]);
const firmCols = reactive<ColumnProps[]>([
  { title: '单位/部门', dataIndex: 'a', minWidth: 100 },
  { title: '联系人', dataIndex: 'b', width: 100, align: 'center',},
  { title: '联系电话', dataIndex: 'c', width: 100, align: 'center',},
  { title: '人员状态', dataIndex: 'd', width: 100, align: 'center',},
])

let monitorDatas = reactive<any[]>([]);
let monitorTimer = null;
let monitorScrollH = ref<number>(0);
const monitorCols = reactive<ColumnProps[]>([
  { title: '企业名称', dataIndex: 'a', minWidth: 100 },
  { title: '联系人', dataIndex: 'b', minWidth: 100 },
  { title: '联系电话', dataIndex: 'c', width: 100, align: 'center',},
  { title: '人员状态', dataIndex: 'd', width: 100, align: 'center',},
])

// 开始滚动
const startS = () => {
  if(activeKey.value == '1') {
    clearInterval(firmTimer)
    firmTimer = setInterval(autoScroll, 50) 
    clearInterval(monitorTimer)
  }
  else {
    clearInterval(monitorTimer)
    monitorTimer = setInterval(autoScroll, 50) 
    clearInterval(firmTimer)
  }
}

// 自动滚动
const autoScroll = () => {
  if(activeKey.value == '1') {
    let body = document.querySelector('.u-firm-tab').querySelector('.ant-table-body')
    firmScrollH.value += 1
    if(firmScrollH.value > body.scrollHeight) {
      firmScrollH.value = 0
    }
    body.scrollTo({
      top: firmScrollH.value,
      behavior: "smooth"
    })
  }
  else if(activeKey.value == '2') {
    let body = document.querySelector('.u-monitor-tab').querySelector('.ant-table-body')
    monitorScrollH.value += 1
    if(monitorScrollH.value > body.scrollHeight) {
      monitorScrollH.value = 0
    }
    body.scrollTo({
      top: monitorScrollH.value,
      behavior: "smooth"
    })
  }
}

const segmentClick = (item) => {
  activeKey.value = item.id;
  setTimeout(() => startS(), 1000)
}

// 快速发短信
let showFastSms = ref<boolean>(false)

// 快速建群
let showFastGroup = ref<boolean>(false)
// 显示群聊弹窗
let showChat = ref<boolean>(false)

</script>

<style lang='scss'>
.u-work-total-row {
  .ant-image {
    display: flex;
    flex-direction: column;
    justify-content: center
  }
}
</style>